1 files changed, 52 insertions, 0 deletions
diff --git a/app/insights/[slug]/page.tsx b/app/insights/[slug]/page.tsx
new file mode 100644
index 0000000..d654ff0
--- /dev/null
+++ b/app/insights/[slug]/page.tsx
@@ -0,0 +1,52 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { Eyebrow, Section } from "@/components/section";
+import { posts } from "@/lib/content";
+
+type Props = { params: Promise<{ slug: string }> };
+
+export async function generateStaticParams() {
+  return posts.map((p) => ({ slug: p.slug }));
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { slug } = await params;
+  const post = posts.find((p) => p.slug === slug);
+  if (!post) return { title: "Insight" };
+  return { title: post.title, description: post.dek };
+}
+
+export default async function InsightPostPage({ params }: Props) {
+  const { slug } = await params;
+  const post = posts.find((p) => p.slug === slug);
+  if (!post) notFound();
+
+  return (
+    <Section className="pt-16 md:pt-24" innerClassName="max-w-2xl">
+      <Link
+        href="/insights"
+        className="text-sm text-muted-foreground hover:text-primary"
+      >
+        ← Insights
+      </Link>
+      <Eyebrow className="mt-8">
+        {post.date} · {post.reading}
+      </Eyebrow>
+      <h1 className="mt-4 font-heading text-4xl leading-tight md:text-5xl">
+        {post.title}
+      </h1>
+      <p className="mt-4 text-lg leading-relaxed text-muted-foreground">
+        {post.dek}
+      </p>
+      <div className="mt-10 space-y-5 text-[15px] leading-relaxed text-foreground/90">
+        {post.paragraphs.map((para) => (
+          <p key={para.slice(0, 40)}>{para}</p>
+        ))}
+      </div>
+      <p className="mt-12 text-sm text-muted-foreground">
+        {post.tags.join(" · ")}
+      </p>
+    </Section>
+  );
+}